<template>
  <div class="e-wrap">
      <div class="e-filter-options clearfix">
        <div class="e-filter">
          <div class="e-item">
            <span class="title">频道标题</span>
            <div class="date dis-block">
              <w-input :holder='`请填写`' v-model="channelParams.chName"></w-input>
            </div>
          </div>
        </div>
        <div class="e-btn">
          <w-button @on-click='changePage(1)'>搜索</w-button>
        </div>
      </div>
      <!-- 广告位列表 -->
      <div class="e-filter-list">
        <div class="e-add">
          <w-button @on-click='$router.push(`/channelMange/add?three=${$route.query.three}`)'>新增频道</w-button>
        </div>
        <!-- 列表数据 -->
        <div class="e-list clearfix" v-if="channelList.totalCount">
          <table>
            <tr class="table-h">
              <th>排序</th>
              <th>频道标题</th>
              <th>风格</th>
              <th>操作</th>
            </tr>
            <tr v-for='(val, index) in channelList.recordList' :key="index">
              <td>{{val.chSequence}}</td>
              <td>{{val.chName}}</td>
              <td>{{val.chNavStyle}}</td>
              <td>
                <span class="cur" @click='$router.push(`/channelMange/add?three=${$route.query.three}&id=${val.id}`)'>编辑 |</span>
                <span class="cur" @click="delPanel = true; delParams.idList = [Number(val.id)]">删除</span>
              </td>
            </tr>
          </table>
          <!-- 分页 -->
          <div class="fr" style="margin-top: 30px">
            <w-paging :current="channelList.currentPage" :total="channelList.pageCount" @on-page='changePage'></w-paging>
          </div>
        </div>

        <!-- 无数据 -->
        <div class="e-list" v-else>
          <table>
            <tr class="table-h">
              <th>排序</th>
              <th>频道标题</th>
              <th>风格</th>
              <th>操作</th>
            </tr>
            <tr>
              <td colspan="4">暂无数据</td>
            </tr>
          </table>
        </div>

        <!-- 删除频道 -->
        <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除频道" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
          <div class="panel-classify">
            是否确认删除该频道
          </div>
        </w-panel-fixed-wrap>
      </div>
  </div>
</template>

<script>
import { apiDecorateMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      delPanel: false,
      // 获取楼层 -- 参数
      channelParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        chName: '',
        currentPage: 1,
        showCount: 15
      },
      channelList: [],
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this._getChannelList()
  },
  methods: {
    // 获取所有频道
    _getChannelList() {
      this.channelParams.accessToken = this.token
      apiDecorateMange.getChannelList(this.channelParams).then(data => {
        this.channelList = data.data
      })
    },
    changePage(page) {
      this.channelParams.currentPage = page
      this._getChannelList()
    },
    delOption() {
      this.delParams.accessToken = this.token
      apiDecorateMange.delChannel(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
    padding-bottom: 20px;
    border-bottom: 1px solid $border-gray-light;
}
.e-item {
    margin-left: 0;
    margin-right: 20px;
}
.e-filter-list {
    width: 100%;
    .e-add {
      margin: 20px 0;
    }
}
.card-panel {
    tr {
      height: 50px;
      & td:first-child {
          text-align: right;
          padding-right: 30px;
      }
      & td:last-child {
        width: 320px;
        span {
          display: inline-block;
          width: 100px;
        }
        & > div {
          display: inline-block;
          width: 150px;
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }
}
</style>